<template>
  <view :class="{'bg-white': bgWhite}" class="w-100 h-100">
    <view class="flex flex-direction justify-center align-center h-100" :style="cardStyle">
      <view class="flex">
        <image class="image" :style="imageStyle" src="../../static/images/no-content.svg" mode="widthFix"></image>
      </view>
      <view>无内容</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "emptyContent",
  props: {
    imageWidth: {
      type: [String],
      default: "200upx",
      required: false
    },
    imageHeight: {
      type: [String],
      default: "200upx",
      required: false
    },
    width: {
      type: [String],
      default: "100%",
      required: false
    },
    height: {
      type: [String],
      default: "100%",
      required: false
    },
    bgWhite: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  data() {
    return {
      imageStyle: {
        width: this.imageWidth,
        height: this.imageHeight
      },
      cardStyle: {
        width: this.width,
        height: this.height,
      }
    };
  }
}
</script>

<style lang="scss">
  .image{
    width: 200upx
  }
</style>
